<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动态举报</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card layui-form">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item" style="padding-left:15px;">
                    <label>话题名称</label>
                    <div class="layui-inline" style="width:200px;">
                        <input type="text" class="layui-input" style="width:200px;" name="TopicName" autocomplete="off"
                            placeholder="请输入名称" />
                    </div>
                    <label>话题分类</label>
                    <div class="layui-inline" style="width:120px;">
                        <select name="TopicType">
                        </select>
                    </div>
                    <div class="layui-inline" style="width:120px;">
                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-list-submit"
                            id="btnSearch">
                            <i class="layui-icon layuiadmin-button-btn layui-icon-search"></i>查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="dataTable" lay-filter="dataTable"></table>
            </div>
        </div>
    </div>
</body>

<script type="text/html" id="add">
    <a class="layui-btn layui-btn-sm" lay-event="add" id="add"><i class="layui-icon layui-icon-add-1"></i>新增</a>
</script>
<script type="text/html" id="edit">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon  layui-icon-edit"></i>编辑</a>
</script>

<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.$;
        var admin = layui.admin;
        var setter = layui.setter;
        var laydate = layui.laydate;

        var controller = {
            data: {
                sellistinfo: {},//选中列表行 
                table: null,
                tabledata: [],
                listmodel: {},//列表行模型 
                topictype: [],//支付方式：1微信 2 支付宝，3零钱支付 4组合支付
            },
            //初始化页面
            initpage: function () {
                var self = this;
                Promise.all([self.GetDict(8154)]).then(res => {
                    self.data.topictype = res[0].data;
                    self.initSelect(self.data.topictype, "TopicType");
                    form.render("select");
                    self.tableLoad();
                })
                self.initEvent();
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20211203093514696/name/?view=layui&fun=" + fun;
                return url;
            },
            formatDate(date) {
                var y = date.getFullYear();
                console.log(y);
                var m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            initSelect: function (data, name) {
                var appendHtml = '';
                appendHtml = "<option value='0'>全部</option>";
                data.forEach(a => {
                    appendHtml += "<option value=" + a.Code + ">" + a.Name + "</option>";
                })
                $("[name=" + name + "]").html(appendHtml);
            },
            //表数据加载
            tableLoad: function () {
                var self = this;
                var searchkey = $("[name='TopicName']").val();
                var topicType = $("[name='TopicType']").val();
                self.data.classTable = table.render({
                    elem: "#dataTable",
                    where: {
                        searchkey: searchkey,
                        topicType: topicType,
                    },
                    url: self.getbaseurl("topic.getlist"),
                    height: "full-100",
                    toolbar: '#add',
                    size: '10',
                    page: true, //开启分页 
                    loading: true,
                    cols: [[
                        { field: 'TopicName', title: '话题名称', width: '10%', fixed: 'left' },
                        { field: 'LookersCount', title: '围观数', width: '10%' },
                        {
                            field: 'TopicType', title: '话题类型', width: '10%', templet: function (d) {
                                var filter = self.data.topictype.filter(a => { return a.Code == d.TopicType; });
                                if (filter != null && filter.length > 0)
                                    return filter[0].Name;
                                else
                                    return "";
                            }
                        },
                        { field: 'TopicDesc', title: '话题描述', width: '30%' },
                        { field: 'CreateTime', title: '创建时间', width: '20%' },
                        { field: 'operation', title: '操作', toolbar: '#edit', fixed: 'right', width: '20%' }
                    ]]
                    , done: function (res) {

                    }
                });
            },
            //页面加载
            initEvent: function () {
                var self = this;
                //订单详情查看，发货
                table.on('tool(dataTable)', function (obj) {
                    var data = obj.data;//当前行数据 
                    window.sellistinfo = data;
                    window.topictype = self.data.topictype;
                    switch (obj.event) {
                        case 'edit':
                            self.openEdit(data.TopicName + '-编辑');
                            break;
                    }
                });
                //话题新增
                table.on("toolbar(dataTable)", function (obj) {
                    window.sellistinfo = null;
                    window.topictype = self.data.topictype;
                    //新增
                    if (obj.event == "add") {
                        self.openEdit("新增话题");
                    }
                });
                //查询列表
                form.on("submit(LAY-list-submit)", function (data) {
                    self.tableLoad();
                });
            },
            //打开编辑器
            openEdit: function (title) {
                var self = this;
                layer.open({
                    type: 2
                    , title: title
                    , content: "edit.html"
                    , area: ['50%', '100%']
                    , btn: ['保存', '取消']
                    , resize: false
                    , success: function (layero, index) {

                    }
                    , btn2: function (index, layero) {

                    }
                    , cancel: function () {

                    }
                    , yes: function (index, layero) {
                        var a = getResult()
                        if (!a.TopicName) {
                            layer.msg("请填写话题名称");
                            return;
                        }
                        if (!a.TopicDesc) {
                            layer.msg("请填写话题描述");
                            return;
                        }
                        self.savetopic(a, () => {
                            self.tableLoad();
                            layer.close(index);
                        })
                    }
                });
            },
            //获取应用字典
            GetDict: function (classId) {
                var self = this;
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: self.getbaseurl("getdict"),
                        method: "get",
                        data: {
                            classId: classId
                        },
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            },
            //保存话题
            savetopic: function (data, succ) {
                admin.req({
                    url: this.getbaseurl("topic.save"),
                    method: "post",
                    data: data,
                    done: res => {
                        if (res.code == 0) {
                            layer.msg("保存成功!")
                            succ && succ();
                        }
                        else
                            layer.msg("保存失败!")
                    }
                });
            },
        }

        /*
        * 入口
        */
        controller.initpage();
    });

</script>